<template>
	<div>
		<el-card>
			<el-breadcrumb separator="/">
				<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
				<el-breadcrumb-item>设置</el-breadcrumb-item>
				<el-breadcrumb-item>基础设置</el-breadcrumb-item>
			</el-breadcrumb>

			<el-tabs v-model="activeName" type="border-card" style="margin-top: 15px;height: 78vh;">
				<el-tab-pane label="基础设置" name="first">
					<el-form ref="form" :model="form" label-width="80px" :rules="rules" r>
						<el-form-item label="意向定金">
							<el-input v-model="form.deposit" placeholder="请设置提交意向单所需支付的定金"></el-input>
						</el-form-item>
						<el-form-item label="预警天数">
							<el-input v-model="form.earlyWarning" placeholder="请设置广告投放预警天数"></el-input>
						</el-form-item>
						<el-form-item label="施工佣金">
							<el-input v-model="form.money" placeholder="请设置施工员安装广告牌的单价"></el-input>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" @click="addSubmitHandle">保存</el-button>
						</el-form-item>
					</el-form>
				</el-tab-pane>
			</el-tabs>
		</el-card>



	</div>
</template>

<script>
import {
	listSetting,
	addOrUpdateSetting
} from "../../network/pc";

export default {
	data() {
		return {
			activeName: 'first',
			form: {
				deposit: '',
				earlyWarning: '',
				money: '',
			},
			rules: {
				deposit: [
					{ required: true, message: '请输入提交意向单所需支付的定金', trigger: 'blur' },
				],
				earlyWarning: [
					{ required: true, message: '请输入广告投放预警天数', trigger: 'blur' },
				],
				money: [
					{ required: true, message: '请设置施工员安装广告牌的单价', trigger: 'blur' },
				],
			}
		};
	},
	methods: {

		addSubmitHandle() {
			this.$refs.form.validate((valid) => {
				if (valid) {
					console.log(this.form);
					addOrUpdateSetting(
						this.form
					).then(res => {
						if (res.flag) {
							this.$message.success('保存成功')
						}
					})
				}
			});
		},

		getList() {
			listSetting().then(res => {
				console.log(res);
				if (res.data != null) {
					this.form = res.data
				}
				console.log(this.form);
			});
		},

	},
	created: function () {
		this.getList();
	}
};
</script>

<style scoped>
.transferW {
	width: 680px;
}

.tipText {
	padding-bottom: 10px;
	padding-left: 130px;
	color: red;
}

.el-input {
	width: 300px;
	margin-left: 10px;
	margin-right: 32px;
}
</style>
